<template>
	<view class="vip-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="goBack">
				<u-icon name="arrow-left" color="#daa520" size="44"></u-icon>
			</view>
			<view class="navbar-title">会员等级</view>
			<view class="navbar-right"></view>
		</view>
		
		<!-- 顶部用户信息区域 -->
		<view class="user-header-section">
			<view class="header-decor-element left"></view>
			<view class="header-decor-element right"></view>
			
			<view class="user-info-card">
				<view class="avatar-wrapper">
					<u-image width="130rpx" height="130rpx" border-radius="50%" :src="userInfo.avatar" class="avatar-image"></u-image>
					<view class="avatar-border"></view>
				</view>
				<view class="user-details">
					<view class="nickname">{{userInfo.nickname}}</view>
					<view class="level-badge">
						<view class="badge-icon"></view>
						{{userInfo.level_name || "暂无等级"}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 会员卡片轮播区域 -->
		<view class="vip-cards-section">
			<view class="section-title-bar">
				<view class="title-icon"></view>
				<text>我的会员等级</text>
			</view>
			
			<swiper class="level-swiper" :current="currentIndex" @change="bindchange">
				<swiper-item v-for="(item, index) in levelList" :key="index" class="swiper-item">
					<view class="vip-card" :class="'vip-level-' + index">
						<view class="card-backdrop" :style="'background-image: url(' + item.background_image + ');'"></view>
						<view class="card-overlay"></view>
						<view class="card-content">
							<view class="card-header">
								<view class="level-status">{{item.lock_desc}}</view>
								<image class="level-icon" :src="item.image"></image>
							</view>
							
							<view class="card-title">
								<view class="level-name">{{item.name}}</view>
								<view class="level-divider"></view>
							</view>
							
							<view class="privilege-tags" v-if="index > 0">
								<view class="tag">专属品鉴</view>
								<view class="tag">会员折扣</view>
								<view class="tag">限定佳酿</view>
							</view>
							
							<view class="progress-section" v-if="item.diff_growth_percent">
								<view class="progress-label">成长值进度</view>
								<view class="progress-bar-container">
									<view class="progress-bar" :style="'width: ' + (item.diff_growth_percent*100) + '%'">
										<view class="progress-glow"></view>
									</view>
								</view>
							</view>
							
							<view class="card-footer">
								<router-link to="/bundle/pages/user_growth/user_growth" class="growth-link" v-if="item.current_level_status != 0">
									<view class="tip-text">
										{{item.tips1}} <u-icon name="arrow-right" size="24"></u-icon>
									</view>
								</router-link>
								<view class="tip-text" v-else>{{item.tips1}}</view>
								<view class="tip-secondary">{{item.tips2}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
            
			<!-- 卡片指示器 -->
			<view class="swiper-indicators">
				<view 
					v-for="(item, index) in levelList" 
					:key="index" 
					class="indicator-dot" 
					:class="{'active': currentIndex === index}"
					@click="currentIndex = index">
				</view>
			</view>
		</view>
		
		<!-- 会员特权展示 -->
		<view class="privileges-section">
			<view class="section-header">
				<view class="section-line"></view>
				<view class="section-title">会员特权</view>
			</view>
			
			<view class="privileges-grid">
				<view class="privilege-item">
					<view class="privilege-icon discount-icon"></view>
					<view class="privilege-name">会员折扣</view>
				</view>
				<view class="privilege-item">
					<view class="privilege-icon tasting-icon"></view>
					<view class="privilege-name">专属品鉴</view>
				</view>
				<view class="privilege-item">
					<view class="privilege-icon gift-icon"></view>
					<view class="privilege-name">生日礼遇</view>
				</view>
				<view class="privilege-item">
					<view class="privilege-icon limited-icon"></view>
					<view class="privilege-name">限定酒款</view>
				</view>
			</view>
		</view>
		
		<!-- 说明区域 -->
		<view class="rules-section">
			<view class="section-header">
				<view class="section-line"></view>
				<view class="section-title">会员说明</view>
			</view>
			<view class="rules-content">
				<text class="rules-text">{{growthRule}}</text>
				<view class="decor-bottle"></view>
			</view>
		</view>
		
		<loading-view v-if="!userInfo.nickname"></loading-view>
	</view>
</template>

<script>
	import {
		getLevelList
	} from '@/api/user';

	export default {
		data() {
			return {
				userInfo: {},
				currentIndex: 0,
				levelList: [],
				growthRule: "",
				privilegeList: []
			};
		},

		onLoad() {
			this.getLevelListFun();
		},

		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			bindchange(e) {
				let {
					current
				} = e.detail;
				let currentLevel = this.levelList[current];
				this.currentIndex = current
			},

			getLevelListFun() {
				getLevelList().then(res => {
					const {
						code,
						data
					} = res;
					if (code != 1) return;
					const {
						user,
						level_intro,
						level
					} = data;
					let index = level.findIndex(item => item.current_level_status == 1);
					if (index == -1) index = 0;
					this.userInfo = user
					this.growthRule = level_intro
					this.levelList = level
					this.currentIndex = index
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #0c0a0f;
		min-height: 100vh;
		color: #fff;
		font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
	}
	
	.vip-container {
		padding-bottom: 60rpx;
		
		.custom-navbar {
			height: 88rpx;
			padding-top: var(--status-bar-height);
			background-image: linear-gradient(135deg, #241b12 0%, #3b2414 100%);
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
			
			.navbar-left {
				width: 100rpx;
				display: flex;
				align-items: center;
			}
			
			.navbar-title {
				flex: 1;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #daa520;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
			
			.navbar-right {
				width: 100rpx;
			}
		}
		
		.user-header-section {
			height: 340rpx;
			background-image: linear-gradient(135deg, #241b12 0%, #3b2414 100%);
			padding: 60rpx 30rpx 40rpx;
			border-bottom-left-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
			position: relative;
			overflow: hidden;
			z-index: 1;
			
			.header-decor-element {
				position: absolute;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				background: radial-gradient(circle, rgba(218, 165, 32, 0.2) 0%, rgba(139, 69, 19, 0.05) 70%);
				
				&.left {
					top: -80rpx;
					left: -80rpx;
				}
				
				&.right {
					bottom: -100rpx;
					right: -60rpx;
					width: 300rpx;
					height: 300rpx;
				}
			}
			
			.user-info-card {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;
				margin-bottom: 30rpx;
				
				.avatar-wrapper {
					position: relative;
					margin-right: 40rpx;
					
					.avatar-image {
						border: 4rpx solid rgba(218, 165, 32, 0.6);
					}
					
					.avatar-border {
						position: absolute;
						top: -10rpx;
						left: -10rpx;
						right: -10rpx;
						bottom: -10rpx;
						border: 2rpx solid rgba(218, 165, 32, 0.3);
						border-radius: 50%;
					}
				}
				
				.user-details {
					margin-left: 20rpx;
					
					.nickname {
						font-size: 48rpx;
						color: #ffffff;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
					
					.level-badge {
						display: inline-flex;
						align-items: center;
						background: linear-gradient(90deg, rgba(218, 165, 32, 0.3) 0%, rgba(218, 165, 32, 0.1) 100%);
						border-radius: 30rpx;
						padding: 10rpx 24rpx;
						font-size: 26rpx;
						color: #daa520;
						border: 1rpx solid rgba(218, 165, 32, 0.5);
						margin-top: 10rpx;
						
						.badge-icon {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background-color: #daa520;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		
		.vip-cards-section {
			position: relative;
			z-index: 2;
			margin-top: -40rpx;
			padding: 0 30rpx;
			
			.section-title-bar {
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				margin-bottom: 30rpx;
				background-color: #0c0a0f;
				padding-top: 20rpx;
				position: relative;
				
				.title-icon {
					width: 8rpx;
					height: 30rpx;
					background: linear-gradient(to bottom, #daa520, #cd7f32);
					margin-right: 12rpx;
					border-radius: 4rpx;
				}
				
				text {
					font-size: 32rpx;
					font-weight: 600;
					color: #daa520;
				}
			}
			
			.level-swiper {
				height: 400rpx;
				width: 100%;
			}
			
			.swiper-item {
				box-sizing: border-box;
				padding: 0 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.vip-card {
				height: 370rpx;
				width: 100%;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
				
				&.vip-level-0 {
					.card-backdrop {
						background-color: #3d3d3d;
					}
					.card-overlay {
						background: linear-gradient(135deg, rgba(70, 70, 70, 0.9) 0%, rgba(30, 30, 30, 0.8) 100%);
					}
				}
				
				&.vip-level-1 {
					.card-backdrop {
						background-color: #8B4513;
					}
					.card-overlay {
						background: linear-gradient(135deg, rgba(139, 69, 19, 0.9) 0%, rgba(80, 40, 10, 0.8) 100%);
					}
				}
				
				&.vip-level-2 {
					.card-backdrop {
						background-color: #CD7F32;
					}
					.card-overlay {
						background: linear-gradient(135deg, rgba(205, 127, 50, 0.9) 0%, rgba(139, 69, 19, 0.8) 100%);
					}
				}
				
				&.vip-level-3 {
					.card-backdrop {
						background-color: #C0C0C0;
					}
					.card-overlay {
						background: linear-gradient(135deg, rgba(192, 192, 192, 0.9) 0%, rgba(105, 105, 105, 0.8) 100%);
					}
				}
				
				&.vip-level-4 {
					.card-backdrop {
						background-color: #DAA520;
					}
					.card-overlay {
						background: linear-gradient(135deg, rgba(218, 165, 32, 0.9) 0%, rgba(184, 134, 11, 0.8) 100%);
					}
				}
				
				.card-backdrop {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-size: cover;
					background-position: center;
					filter: blur(2px);
				}
				
				.card-overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}
				
				.card-content {
					position: relative;
					z-index: 10;
					height: 100%;
					padding: 40rpx;
					display: flex;
					flex-direction: column;
					
					&:before {
						content: '';
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						right: 10rpx;
						bottom: 10rpx;
						border: 1rpx solid rgba(255, 255, 255, 0.2);
						border-radius: 16rpx;
						pointer-events: none;
					}
				}
				
				.card-header {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					height: 80rpx;
					
					.level-status {
						background-color: rgba(0, 0, 0, 0.4);
						border-radius: 30rpx;
						padding: 8rpx 24rpx;
						font-size: 24rpx;
						color: #ffffff;
					}
					
					.level-icon {
						width: 160rpx;
						height: 145rpx;
						filter: drop-shadow(0 4rpx 6rpx rgba(0, 0, 0, 0.3));
						position: relative;
						top: -40rpx;
						right: -36rpx;
					}
				}
				
				.card-title {
					// margin: 30rpx 0;
					
					.level-name {
						font-size: 54rpx;
						font-weight: bold;
						color: #ffffff;
						text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
						letter-spacing: 2rpx;
					}
					
					.level-divider {
						width: 60rpx;
						height: 6rpx;
						background-color: rgba(255, 255, 255, 0.6);
						margin-top: 16rpx;
						border-radius: 3rpx;
					}
				}
				
				.privilege-tags {
					display: flex;
					margin-bottom: 20rpx;
					margin-top: 20rpx;
					
					.tag {
						background-color: rgba(255, 255, 255, 0.2);
						color: white;
						padding: 6rpx 16rpx;
						border-radius: 6rpx;
						font-size: 22rpx;
						margin-right: 12rpx;
					}
				}
				
				.progress-section {
					margin: 20rpx 0;
					
					.progress-label {
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.8);
						margin-bottom: 8rpx;
					}
					
					.progress-bar-container {
						background-color: rgba(255, 255, 255, 0.2);
						height: 12rpx;
						border-radius: 6rpx;
						overflow: hidden;
						
						.progress-bar {
							background: linear-gradient(to right, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 1));
							height: 100%;
							border-radius: 6rpx;
							transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
							position: relative;
							overflow: hidden;
							
							.progress-glow {
								position: absolute;
								top: 0;
								right: 0;
								height: 100%;
								width: 20rpx;
								background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
								animation: glow 1.5s infinite;
							}
							
							@keyframes glow {
								0% { transform: translateX(-100%); }
								100% { transform: translateX(500%); }
							}
						}
					}
				}
				
				.card-footer {
					margin-top: auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.growth-link, .tip-text {
						font-size: 26rpx;
						color: #ffffff;
						display: flex;
						align-items: center;
					}
					
					.tip-secondary {
						font-size: 26rpx;
						color: #ffffff;
						opacity: 0.8;
					}
				}
			}
			
			.swiper-indicators {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;
				
				.indicator-dot {
					width: 14rpx;
					height: 14rpx;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.3);
					margin: 0 10rpx;
					transition: all 0.3s;
					cursor: pointer;
					
					&.active {
						width: 30rpx;
						border-radius: 10rpx;
						background-color: #daa520;
					}
				}
			}
		}
		
		.privileges-section {
			margin: 20rpx 40rpx;
			background: linear-gradient(135deg, #1a1410 0%, #241b12 100%);
			border-radius: 16rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
			border: 1rpx solid rgba(218, 165, 32, 0.3);
			
			.section-header {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				
				.section-line {
					width: 8rpx;
					height: 34rpx;
					background: linear-gradient(to bottom, #daa520, #cd7f32);
					border-radius: 4rpx;
				}
				
				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 20rpx;
					color: #daa520;
				}
			}
			
			.privileges-grid {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.privilege-item {
					width: 45%;
					background-color: rgba(255, 255, 255, 0.05);
					border-radius: 16rpx;
					padding: 30rpx 20rpx;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					border: 1rpx solid rgba(218, 165, 32, 0.2);
					
					.privilege-icon {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 16rpx;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						
						&.discount-icon {
							background-image: url('');
						}
						&.tasting-icon {
							background-image: url('');
						}
						&.gift-icon {
							background-image: url('');
						}
						&.limited-icon {
							background-image: url('');
						}
					}
					
					.privilege-name {
						font-size: 28rpx;
						color: #daa520;
						font-weight: 500;
					}
				}
			}
		}
		
		.rules-section {
			margin: 20rpx 40rpx;
			background: linear-gradient(135deg, #1a1410 0%, #241b12 100%);
			border-radius: 16rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
			border: 1rpx solid rgba(218, 165, 32, 0.3);
			position: relative;
			overflow: hidden;
			
			.section-header {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.section-line {
					width: 8rpx;
					height: 34rpx;
					background: linear-gradient(to bottom, #daa520, #cd7f32);
					border-radius: 4rpx;
				}
				
				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 20rpx;
					color: #daa520;
				}
			}
			
			.rules-content {
				padding: 10rpx 0;
				position: relative;
				
				.rules-text {
					font-size: 26rpx;
					color: rgba(255, 255, 255, 0.8);
					line-height: 1.8;
				}
				
				.decor-bottle {
					position: absolute;
					bottom: -40rpx;
					right: -20rpx;
					width: 120rpx;
					height: 300rpx;
					opacity: 0.1;
					background-image: url('');
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					pointer-events: none;
				}
			}
		}
	}
</style>
